import { Tabs } from 'antd';
import React, { useEffect, useState } from 'react'
import './tabStyle.css'
import SecTab from './SecTab'
// import { Link,withRouter } from 'react-router-dom'
import { SearchOutlined } from '@ant-design/icons';
// import AddCo from '../pages/community/AddCo'
import ComItem from './ComItem'
import Camera from '../components/Camera'
import { getFocue, getHot, send2 } from '../api/community'
import axios from 'axios';
const { TabPane } = Tabs;
const styleLeft = {
  marginLeft: '0.3rem',
  fontSize: '.3rem',
  background: 'white'
}


const slot = {
  left: <SearchOutlined style={styleLeft} />,
  right: <Camera></Camera>
}

const Demo = (props) => {
  let [focus, setfocus] = useState([{}])
  let [hot, sethot] = useState([{}])
  useEffect(() => {
    getFocue({
      uid: 1
    }).then(res => {
      setfocus(res.data)
    })
    getHot({
      page: 1,
      pagesize: 100
    }).then(res => {
      sethot(res.data)
    })
    
  }, [])
  return (
    <div className="tutu">

      <Tabs
        tabBarExtraContent={slot}
        forceRender={true}
        animated={true}
        centered={true}
      >
        <TabPane tab="关注" key="1" style={{ background: 'e1e1e1' }}>
          {
            focus.map((el, i) => <ComItem key={i} {...el}></ComItem>)
          }
        </TabPane>
        <TabPane tab="发现" key="2" style={{ background: 'e1e1e1' }}>
          <SecTab></SecTab>
        </TabPane>
        <TabPane tab="热门" key="3" style={{ background: 'e1e1e1' }}>
          {
            hot.map((el, i) => <ComItem key={i} {...el}></ComItem>)
          }
        </TabPane>
      </Tabs>
    </div>
  );
};

export default Demo